<template>
	<view class="content">
		<view class="searchBox">
			<u-search placeholder="请输入货物名称" v-model="name" @search="search"></u-search>
		</view>
		<view class="zhanwei"></view>
		<view class="listBox">
			<view class="list" v-for="(item,index) in list">
				<view class="name">{{item.name}}</view>
				<view class="optionsBox">
					<view class="optionsLabel">序号：</view>
					<view class="optionsLabel">{{item.xuhao}}</view>
				</view>
				<view class="categoryBox">
					<view @click="choose(index,indexIn)" v-for="(itemIn,indexIn) in item.category" class="category" :class="item.chooseIndex == indexIn?'choose':''">{{itemIn.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				oldList:[],
				list:[ 
					{id:1,name:'货物1',chooseIndex:0,xuhao:'我是序号',category:[
						{id:1,name:'规格1',weizhi:'',jinhuowhu:'进货数',chuhuoshu:'出货数',kucun:'库存',jilu:[
							{id:1,content:'我是一条记录',date:'2021-19-19'}
						]},
						{id:2,name:'规格2',weizhi:'',jinhuowhu:'进货数',chuhuoshu:'出货数',kucun:'库存',jilu:[
							{id:1,content:'我是一条记录',date:'2021-19-19'}
						]},
					]}
				]
			}
		},
		onLoad() {
			// this.setList()
		},
		methods: {
			setList(){
				this.oldList = uni.getStorageSync('list')||[]
				let list = uni.getStorageSync('list')||[]
				list.forEach(item=>{
					item.chooseIndex = 0
				})
				this.list = list
			},
			choose(index1,index2){
				this.list[index1].chooseIndex = index2
				console.log(this.list[index1].chooseIndex)
			},
			search(e){
				console.log(e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.searchBox{
		display: flex;
		align-items: center;
		height: 120upx;
		padding: 0 30upx;
		background-color: white;
		position: fixed;
		left: 0;
		top: 0;
		width: 750upx;
		box-shadow: 0 -10upx 16upx 10upx rgba(0, 0,0 ,0.3);
	}
	.zhanwei{
		height: 120upx;
	}
	.listBox{
		padding: 30upx;
		padding-bottom: 200upx;
	}
	.list{
		background-color: white;
		border-radius: 20upx;
		padding: 20upx;
		box-shadow:  0 0 16upx -8upx rgba(0, 0, 0, 0.3);
	}
	.name{
		font-size: 36upx;
	}
	.optionsBox{
		display: flex;
		align-items: center;
	}
	.categoryBox{
		display: flex;
		flex-wrap: wrap;
		padding-top: 20upx;
	}
	.category{
		white-space: nowrap;
		margin: 0 20upx 20upx 0;
		border-radius: 6upx;
		padding: 10upx 30upx;
		background-color: #eee;
		color: #888;
		font-size: 30upx;
		box-shadow: 0 8upx 16upx -8upx rgba(0, 0, 0, 0.3);
	}
	.choose{
		color: white;
		background-color: orange;
	}
</style>
